<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 16:59:37
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-16 10:33:29
 * @FilePath: \jzjy\src\views\ProductCenter\productDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="tips">
      <el-dialog
        :visible.sync="dialogVisible"
        width="540px"
        :before-close="handleClose"
        :close-on-click-modal="tipsClose"
      >
        <div class="slBox">
          <div class="top">
            <img src="../../assets/img/Yssl1.png" alt="" />
          </div>
          <div class="msgBox">
            <el-form label-width="70px">
              <el-form-item label="您的身份：">
                <el-select
                  v-model="zhiwuTitle"
                  placeholder="（点击可修改）"
                  @change="changeGrade"
                >
                  <el-option
                    v-for="item in zhiwu"
                    :key="item.id"
                    :label="item.title"
                    :value="item.title"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="cell">
              <p>联系方式：</p>
              <span
                ><input
                  v-model="tel"
                  type="text"
                  placeholder="（点击可修改）" /><a></a
              ></span>
            </div>
            <div class="cell">
              <p>请问您是：</p>
              <span>
                <div class="tab1 taps">
                  <div
                    class="classRadio"
                    v-for="item in fangshiList"
                    :key="item.id"
                    @click="chogeFf(item.title)"
                  >
                    <div class="tips1 tips" v-if="fangshi != item.title">
                      <span></span>
                    </div>
                    <div class="tips2 tips" v-if="fangshi == item.title">
                      <span></span>
                    </div>
                    <p>{{ item.title }}</p>
                  </div>
                </div>
              </span>
            </div>
            <div class="liucheng" v-show="fangshi == '集体采买'">
              <p>您学校选材流程为:<a>（仅集体采买选择）</a></p>
              <div
                class="liuchengList"
                v-for="item in liucheng"
                :key="item.id"
                @click="choseLiucheng(item.title)"
                :class="{ choseLiuchengList: lcName == item.title }"
              >
                <p>{{ item.title }}</p>
                <img
                  src="../../assets/img/Yssl2.png"
                  v-show="lcName == item.title"
                />
              </div>
            </div>
            <div class="liucheng" v-show="fangshi == '集体采买'">
              <p>您学校图书订购渠道为:<a>（仅集体采买选择）</a></p>
              <div
                class="liuchengList"
                v-for="item in mudi"
                :key="item.id"
                @click="choseMudi(item.title)"
                :class="{ choseLiuchengList: qdName == item.title }"
              >
                <p>{{ item.title }}</p>
                <img
                  src="../../assets/img/Yssl2.png"
                  v-show="qdName == item.title"
                />
              </div>
            </div>
            <div class="grzy" v-show="fangshi == '个人自用'">
              <p>仅<a>【集体采买】</a>才可以免费申请哦！</p>
              <h5>如需单独购买请添加下方客服进行咨询</h5>
              <div class="kfevm">
                <img :src="tskf_file_url" />
              </div>
            </div>
            <div class="tijiao"  v-show="fangshi == '集体采买'" @click="submit">提交</div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="heduiMsg">
      <el-dialog
        :visible.sync="heduiShow"
        width="400px"
        :close-on-click-modal="tipsClose"
      >
        <div class="heduiBox">
          <div class="top">
            <h2>请核对并确认以下信息</h2>
          </div>
          <p>1.您的身份：{{ zhiwuTitle }}</p>
          <p>
            2.联系方式：<a>{{ tel }}</a>
          </p>
          <p>3.申请目的：{{ fangshi }}</p>
          <p>4.选材流程：{{ lcName }}</p>
          <p>5.订书渠道：{{ qdName }}</p>
          <div class="anniu">
            <span @click="heduiShow = false">返回修改</span>
            <span @click="submitJt">确认申请</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="grSuccessBox">
      <el-dialog
        :visible.sync="grSuccessShow"
        width="400px"
        :close-on-click-modal="tipsClose"
      >
        <div class="top">
          <h2>提交成功</h2>
        </div>
        <p>您申请样书用途为个人自用！请添加客服微信了解申 请详情~</p>
        <img :src="tskf_file_url" alt="" />
        <span @click="grSuccessShow = false">我已添加客服~</span>
      </el-dialog>
    </div>
    <div class="jtSuccessBox">
      <el-dialog
        :visible.sync="jtSuccessShow"
        width="400px"
        :close-on-click-modal="tipsClose"
      >
        <div class="top">
          <h2>提交成功</h2>
        </div>
        <p>感谢您的支持！我们会在 <a>5个</a> 工作日内联系您！</p>
        <p class="tishi">
          <a>*</a>请注意陌生号码来电，任何疑问也可以咨询平台官方客服哦！
        </p>
        <!-- <img :src="tskf_file_url_jt" alt="" />
        <p class="tishi">您可直接扫码添加上方客服~申请更快速哦！</p>
        <span @click="jtSuccessShow = false">我已添加客服~</span> -->
      </el-dialog>
    </div>
    <div class="bread">
      <span>当前位置：</span>
      <el-breadcrumb separator=">">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="top">
      <div class="box1">
        <img :src="file_url" alt="" />
        <div class="msg">
          <div class="title">
            <span v-if="kemu_id == 1">高中语文</span>
            <span v-if="kemu_id == 3">高中英语</span>
            <h2>{{ title }}</h2>
          </div>
          <!-- <p>权威编者：{{ author }}</p> -->
          <span class="synopsis">{{ synopsis }}</span>
        </div>
        <div class="shenling" @click="getbook" v-if="ask_status == 0">
          申领样书
        </div>
        <div class="shenling" v-if="ask_status == 1" @click="yishenqing">
          已申请
        </div>
      </div>
    </div>
    <div class="content">
      <div class="navTap">
        <div
          class="tap1 tap"
          :class="{ choseTap: activeName == 1 }"
          @click="activeName = 1"
          v-if="is_show_contents == 1"
        >
          产品详情
        </div>
        <div
          class="tap2 tap"
          :class="{ choseTap: activeName == 2 }"
          @click="choseRead"
        >
          在线试读
        </div>
        <div
          class="tap2 tap"
          :class="{ choseTap: activeName == 3 }"
          @click="activeName = 3"
          v-if="zyall_num != 0"
        >
          图书配套资源
        </div>
      </div>
      <div class="detail">
        <div class="contents" v-html="contents" v-show="activeName == 1"></div>
        <div class="home" v-show="activeName == 2">
          <div class="turnClass">
            <div class="bookTitle">
              <h2>{{ title }}</h2>
              <div class="full" @click="goFullScreenBooks">
                <i class="el-icon-full-screen"></i>
                全屏
              </div>
            </div>
            <div class="bookBox">
              <div class="yinying yinying1">
                <img src="../../assets/img/bookright.png" alt="" />
              </div>
              <div class="yinying yinying2">
                <img src="../../assets/img/bookright.png" alt="" />
              </div>
              <div class="yinying yinying3"></div>
              <div class="yinying yinying4">
                <img src="../../assets/img/bookcenter.png" alt="" />
              </div>
              <div id="flipbook">
                <div v-for="(item, index) in file_lists" :key="index">
                  <img :src="item.file_url" alt="" />
                  <span class="pageIndex" style="color: #333">
                    {{ index + 1 }}
                  </span>
                </div>
              </div>
            </div>
            <div class="changePage">
              <span class="previous" @click="previous"
                ><i class="el-icon-arrow-left"></i
              ></span>
              <span class="next" @click="next"
                ><i class="el-icon-arrow-right"></i
              ></span>
            </div>
          </div>
        </div>
        <div class="ptzy" v-show="activeName == 3">
          <div class="ptzyTop">
            <div class="zyLeft">
              <img src="../../assets/img/nochose.png" @click="quanxuan" v-show="zyall_num != zyArr.length">
              <img src="../../assets/img/chose.png" @click="zyArr=[]" v-show="zyall_num == zyArr.length">
              <p>全选</p>
            </div>
            <div class="zyRight">
              <p>(已选择<a style="color:#F6444E;">{{zyArr.length}}</a>条)</p>
              <span @click="getDownUrl">批量下载</span>
            </div>
          </div>
          <div class="zyContent">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item  :name="index" v-for="(item,index) in tszyList" :key="index">
                <template slot="title">
                  <div class="fenleiTop">
                    <div class="fleft">{{item.title}}</div>
                    <div class="fright" v-show="activeNames.indexOf(index) == -1">展开</div>
                    <div class="fright" style="color: #08A579;" v-show="activeNames.indexOf(index) != -1">收起</div>
                  </div>
                </template>
                <div class="list" v-for="list in item.list" :key="list.id">
                  <div class="kjLeft">
                    <img src="../../assets/img/nochose.png" @click="chosedzy(list)" v-show="zyArr.indexOf(list.id) == -1">
                    <img src="../../assets/img/chose.png" @click="chosedzy(list)" v-show="zyArr.indexOf(list.id) != -1">
                    <p>{{list.title}}</p>
                  </div>
                  <div class="kjRight">
                    <p style="color: #08A579;" @click="goResdetails(list.id,list.suffix)">详情</p>
                    <p style="color: #08A579;" v-if="xz_status == 1" @click="getSingleDownUrl(list.id)">下载</p>
                    <p v-if="xz_status == 0">未解锁</p>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div class="biaoji"></div>
      <div class="seemore" v-show="activeName != 3">
        <p>
          {{ title }}
        </p>
        <div class="shenling" @click="getbook" v-if="ask_status == 0">
          申领样书
        </div>
        <div
          class="shenling"
          v-if="ask_status == 1"
          @click="grSuccessShow = true"
        >
          已申请
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import turn from "../../utils/turn.min.js";
import {
  bookdetail,
  userinfo,
  askbook,
  list_systypes,
  sysinfo,
  getproductbookkejian,
  plxz_url_arr,
  url_kejian,
} from "../../api/http";
export default {
  inject: ["reload"], //刷新页面
  data() {
    return {
      account: "", //用户手机号
      school_title: "", //用户学校名称
      province: "", //省
      city: "", //市
      area: "", //区
      bookResId: 0, //图书详情id
      title: "", //图书标题
      author: "", //作者
      synopsis: "", //图书简介
      file_url: "", //详情封面
      contents: "", //图书详情
      dialogVisible: false,
      activeName: 3,
      tipsClose: true,
      file_lists: [],
      height: 570,
      width: 840,
      zhiwu: [], //职务列表
      zhiwuTitle: "", //职务名称
      tel: "", //联系电话
      liucheng: [],
      lcName: "",
      mudi: [],
      qdName: "",
      fangshiList: [],
      fangshi: "集体采买", //采购方式
      heduiShow: false, //集体采集
      grSuccessShow: false, //个人购买成功
      tskf_file_url: "", //图书公共客服二维码   个人
      jtSuccessShow: false, //集体购买成功
      tskf_file_url_jt: "", //  客服二维码  集体
      sqys_sqmd: "", //之前申请的方式
      ask_status: "", //申请状态

      kemu_id: "", //科目id
      is_show_contents: "", //产品详情富文本是否有内容
      activeNames: [0],//栅栏值
      tszyList:[],//图书配套资源列表
      zyArr:[],//已选择的资源id
      zyall_num:'',//资源总数
      xz_status:'',//包是否可下载状态
      urlArr: [], //选中的课件组下载链接数组
    };
  },
  created() {
    //获取个人申请成功后的系统图书公共客服二维码
    // sysinfo().then((res) => {
    //   console.log(res.retRes.tskf_file_url, "系统图书公共客服二维码");
    //   this.tskf_file_url = res.retRes.tskf_file_url;
    // });
    console.log(this.$route.query);
    this.bookResId = this.$route.query.id;
    this.getproductbookkejian()
    //获取用户详情
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
        this.$router.push({
          name: "Login",
          query: {
            isgq: 1,
          },
        });
      } else {
        console.log(res, "用户详情");
        const data = res.retRes;
        this.account = data.account; //用户手机号
        this.school_title = data.school_title; //用户学校名称
        this.zhiwuTitle = data.zhiwu_title;
        this.tel = data.account;
        this.province = data.province; //省
        this.city = data.city; //市
        this.area = data.area; //区
      }
    });
    //获取职务列表
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "zhiwu",
    }).then((res) => {
      console.log(res, "职务列表");
      this.zhiwu = res.retRes;
    });
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "sqys_sqmd",
    }).then((res) => {
      console.log(res, "申请目的");
      this.fangshiList = res.retRes;
      this.fangshiList.reverse();
      console.log(this.fangshiList, "123");
    });
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "sqys_cglc",
    }).then((res) => {
      console.log(res, "采购流程");
      this.liucheng = res.retRes;
    });
    list_systypes({
      md5key: localStorage.getItem("md5key"),
      type_str: "sqys_dgqd",
    }).then((res) => {
      console.log(res, "订购渠道");
      this.mudi = res.retRes;
    });
    //获取图书详情
    bookdetail({
      md5key: localStorage.getItem("md5key"),
      id: this.bookResId,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "图书详情");
        const data = res.retRes;
        this.title = data.title;
        this.synopsis = data.synopsis;
        this.contents = data.contents;
        this.author = data.author;
        this.file_url = data.file_url;
        const file_lists = data.file_lists;
        this.file_lists = file_lists;
        this.tskf_file_url = data.tskf_file_url;
        this.tskf_file_url_jt = data.kf_file_url;
        this.sqys_sqmd = data.sqys_sqmd;
        this.ask_status = data.ask_status;
        this.kemu_id = data.kemu_id;
        this.is_show_contents = data.is_show_contents;
        if (data.is_show_contents == 1) {
          this.activeName = 1;
        } else {
          this.activeName = 2;
        }
        console.log(this.activeName);
      }
    });
  },
  mounted() {
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //执行turn.js
    setTimeout(() => {
      this.onTurn();
    }, 300);
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
  //前往资源详情
  goResdetails(id,suffix) {
      console.log(id,suffix);
      if (suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
      } else if (suffix == "rar" || suffix == "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.mb_bookTitle, //书本名
            mb_muluTitle: this.mb_muluTitle, //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.mb_tapTitle, //分类名
            mb_tagTitle: this.mb_tagTitle, //标签名
            bookid: this.kejianbooks_id, //书本id
            muluid: this.kejianchapters_id, //目录id
            fenleiid: this.kejianfl_id, //分类id
            tgid: this.kejiantag_id, //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path:
              this.$route.path +
              "?keyword=" +
              this.value +
              "&bigtapvalue=" +
              this.bigtapvalue +
              "&page=" +
              this.page +
              "&page_size=" +
              this.page_size,
            routeName: this.value
              ? "搜索结果： " + JSON.stringify(this.value)
              : "搜索",
            isSearch: 1,
          },
        });
        window.open(href, "_blank");
      }
    },
    //获取图书配套资源
    getproductbookkejian(){
      getproductbookkejian({
        md5key: localStorage.getItem("md5key"),
        id: this.bookResId,
      }).then(res=>{
        console.log(res,"图书配套资源")
        this.tszyList = res.retRes.list;
        this.zyall_num = res.retRes.all_num;
        this.xz_status = res.retRes.xz_status;
      })
    },
    //打开关闭栅栏
    handleChange(e){
      console.log(this.activeNames)
    },
    //选中或取消选中资源
    chosedzy(lits){
      if(this.zyArr.indexOf(lits.id) == -1){
        this.zyArr.push(lits.id)
      }else{
        this.zyArr.splice(this.zyArr.indexOf(lits.id),1)
      }
      // console.log(this.zyArr.length,this.zyall_num)
    },
    //全选
    quanxuan(){
      this.zyArr = []
      const list = []
      this.tszyList.forEach(item=>{
        list.push(...item.list)
      })
      list.forEach(item=>{
        this.zyArr.push(item.id)
      })
    },
    //获取当前已选中课件的下载链接数组
    getDownUrl() {
      plxz_url_arr({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id: this.$route.query.kejianbao_id,
        ids: this.zyArr,
      }).then((res) => {
        if (res.retInt == 1) {
          this.urlArr = res.retRes;
          var i = 0;
          const that = this;
          var timer = setInterval(function () {
            console.log(that.urlArr[i]);
            that.downloadFile(that.urlArr[i]);
            i++;
            if (i > that.urlArr.length) {
              clearInterval(timer);
            }
          }, 2000);
        }
      });
    },
    //单独下载一个资源
    getSingleDownUrl(id){
      url_kejian({
        md5key: localStorage.getItem("md5key"),
        id:id,
      }).then((res) => {
        console.log(res);
        if (res.retInt == 1) {
          let url = res.retRes.download_file_url;
          const a = document.createElement("a");
          a.href = url;
          a.download = res.retRes.title;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    //下载
    downloadFile(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height = 0;
      iframe.src = url;
      document.body.appendChild(iframe);
      // 1s之后删除
      setTimeout(() => {
        iframe.remove();
        // console.log(url);
      }, 1000);
    },
    //粘性定位咨询客服按钮
    handleScroll() {
      if(this.activeName == 1){
        let seemore = document.getElementsByClassName("seemore")[0];
        let box = document.getElementsByClassName("biaoji")[0];
        let box1 = document.getElementsByClassName("box1")[0];
        const detail = document.getElementsByClassName("detail")[0];
        const navTap = document.getElementsByClassName("navTap")[0];
        const offset = box.getBoundingClientRect();
        const offsetTop = offset.top;
        const offsetBottom = offset.bottom;
        // console.log(box1.getBoundingClientRect().top, "123");
        //进入可视区
        if (offsetTop < window.innerHeight && offsetBottom > 0) {
          seemore.style.position = "relative";
        } else {
          seemore.style.position = "fixed";
        }
        if (box1.getBoundingClientRect().top > 20) {
          seemore.style.position = "relative";
        }
        if (detail.getBoundingClientRect().top < 20) {
          navTap.style.position = "fixed";
          navTap.style.top = "82px";
        } else {
          navTap.style.position = "relative";
          navTap.style.top = "0";
        }
      }
      // console.log(detail.getBoundingClientRect().top)
    },
    //选择在线阅读
    choseRead() {
      // this.reload()
      setTimeout(() => {
        this.activeName = 2;
      }, 10);
    },
    //点击已申请
    yishenqing() {
      console.log(this.sqys_sqmd);
      if (this.sqys_sqmd == 2) {
        this.grSuccessShow = true;
      } else {
        this.jtSuccessShow = true;
      }
    },
    //选择职务
    changeGrade(e) {
      this.zhiwuTitle = e;
    },
    //选择流程
    choseLiucheng(e) {
      this.lcName = e;
    },
    //选择目的
    choseMudi(e) {
      this.qdName = e;
    },
    //选择方式
    chogeFf(e) {
      this.fangshi = e;
    },
    //申领图书弹窗关闭
    handleClose() {
      this.dialogVisible = false;
    },
    //申领样书
    getbook() {
      this.dialogVisible = true;
      console.log(this.fangshi);
    },
    //集体申请提交
    submitJt() {
      askbook({
        md5key: localStorage.getItem("md5key"),
        id: this.bookResId,
        account: this.tel, //用户手机号
        school_title: this.school_title, //用户学校名称
        sqys_sqmd: this.fangshi,
        sqys_cglc: this.lcName,
        sqys_dgqd: this.qdName,
        zhiwu_title: this.zhiwuTitle,
      }).then((res) => {
        if (res.retInt == 1) {
          this.jtSuccessShow = true;
          this.heduiShow = false;
          this.dialogVisible = false;
          this.ask_status = 1;
          this.sqys_sqmd = 1;
        } else {
          this.$message({
            message: res.retErr,
            duration: 1000,
            offset: 300,
          });
        }
      });
    },
    //提交
    submit() {
      // console.log(this.fangshi,this.lcName,this.qdName,)
      if (this.zhiwuTitle == "") {
        this.$notify({
          message: "请选择您的身份",
          duration: 2000,
          showClose: false,
        });
      } else if (this.tel == "") {
        this.$notify({
          message: "请填写您的联系方式",
          duration: 2000,
          showClose: false,
        });
      } else if (this.fangshi == "") {
        this.$notify({
          message: "请选择申领目的",
          duration: 2000,
          showClose: false,
        });
      } else if (this.fangshi == "个人自用") {
        askbook({
          md5key: localStorage.getItem("md5key"),
          id: this.bookResId,
          account: this.tel, //用户手机号
          school_title: this.school_title, //用户学校名称
          sqys_sqmd: this.fangshi,
          // sqys_cglc: this.lcName,
          // sqys_dgqd: this.fangshi,
          zhiwu_title: this.zhiwuTitle,
        }).then((res) => {
          if (res.retInt == 1) {
            this.grSuccessShow = true;
            this.dialogVisible = false;
            this.ask_status = 1;
            this.sqys_sqmd = 2;
            //更新状态
            // bookdetail({
            //   md5key: localStorage.getItem("md5key"),
            //   id: this.bookResId,
            // }).then((res) => {
            //   // this.ask_status = res.retRes.ask_status;
            //   this.tskf_file_url = res.retRes.kf_file_url
            //   this.tskf_file_url_jt = res.retRes.tskf_file_url;
            // });
          } else {
            this.$message({
              message: res.retErr,
              duration: 1000,
              offset: 300,
            });
          }
        });
      } else if (this.fangshi == "集体采买" && this.lcName == "") {
        this.$notify({
          message: "请选择选材流程",
          duration: 2000,
          showClose: false,
        });
      } else if (this.fangshi == "集体采买" && this.qdName == "") {
        this.$notify({
          message: "请选择订购渠道",
          duration: 2000,
          showClose: false,
        });
      } else {
        this.heduiShow = true;
      }
    },
    //切换tap栏
    handleClick(tab, event) {
      console.log(tab, event);
      // this.next()
    },
    //设置图书翻页
    onTurn() {
      this.$nextTick(() => {
        $("#flipbook").turn({
          display: "double",
          autoCenter: false,
          acceleration: true,
          gradients: false,
          height: this.height,
          width: this.width,
          turnCorners:'bl',
          gradients: true,
          elevation: 50,
          pages: 1000,
          page: 1,
          when: {
            turning: function (e, page, view) {},
            start: function (e, page) {},
            turned: function (e, page) {
              const bookBox = document.querySelector("#flipbook");
              const yinying1 = document.querySelector(".yinying1");
              const yinying2 = document.querySelector(".yinying2");
              const yinying3 = document.querySelector(".yinying3");
              const yinying4 = document.querySelector(".yinying4");
              if (page > 1) {
                yinying1.style.display = "none";
                yinying2.style.display = "block";
                yinying3.style.display = "block";
                yinying4.style.display = "block";
                bookBox.style.margin = " 0 auto";
              } else {
                bookBox.style.marginLeft = "-65px";
                yinying1.style.display = "block";
                yinying2.style.display = "none";
                yinying3.style.display = "none";
                yinying4.style.display = "none";
              }
            },
          },
        });
      });
    },
    //上一页
    previous() {
      $("#flipbook").turn("previous");
      console.log($("#flipbook").turn("page"), "当前页码");
      // console.log($("#flipbook").turn("pages"), "总页数");
    },
    //下一页
    next() {
      console.log(123);
      $("#flipbook").turn("next");
      // $("#flipbook").turn("center")
      console.log($("#flipbook").turn("page"), "当前页码");
      // console.log($("#flipbook").turn("pages"), "总页数");
    },
    //跳转到哪一页
    // $("#flipbook").turn("page",4)
    //前往全屏阅读
    goFullScreenBooks() {
      this.$router.push({
        name: "FullScreenBooks",
        query: {
          id: this.bookResId,
        },
      });
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
.el-input {
  width: 400px;
}
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
</style>
<style lang="less" scoped>
#container {
  height: 100%;
  background-color: #f0f0f5;
  .tips {
    // text-align: center;
    border-radius: 20px;
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    .slBox {
      padding-bottom: 20px;
      .top {
        img {
          width: 540px;
        }
      }
      .msgBox {
        padding: 0 30px;
        /deep/.el-form {
          width: 400px;
          user-select: none;
        }
        /deep/.el-input {
          width: 400px;
        }
        /deep/.el-select {
          width: 400px;
        }
        /deep/.el-cascader .el-input {
          width: 400px;
        }
        /deep/.el-input--small .el-input__inner {
          height: 38px;
          line-height: 38px;
        }
        /deep/.el-form-item__label {
          padding: 0;
        }
        /deep/.el-select .el-input.is-focus .el-input__inner {
          border-color: #08a579;
        }
        /deep/.el-select .el-input__inner:focus {
          border-color: #08a579;
        }
        .cell {
          display: flex;
          align-items: center;
          margin-top: 20px;
          p {
            font-size: 14px;
            color: #646566;
            font-family: Microsoft YaHei;
          }
          input {
            padding-left: 15px;
            color: #666;
            width: 382px;
            height: 30px;
            border: 0;
            // border: 1px solid #dcdfe6;
            border-radius: 4px;
            outline: none;
            background: #fff;
            cursor: pointer;
          }
          span {
            width: 400px;
            height: 36px;
            border: 0;
            border: 1px solid #dee0e3;
            border-radius: 4px;
            line-height: 36px;
            text-align: left;
            color: #646566;
            a {
              margin-left: 10px;
              color: #969799;
            }
            .taps {
              display: flex;
              flex-wrap: wrap;
              .classRadio {
                display: flex;
                margin-right: 70px;
                margin-left: 30px;
                cursor: pointer;
                .tips {
                  position: relative;
                  top: 10px;
                  margin-right: 8px;
                  width: 14px;
                  height: 14px;
                  border: 1px solid #cccccc;
                  border-radius: 100%;
                  line-height: 12px;
                  text-align: center;
                  span {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    width: 9px;
                    height: 9px;
                    background-color: #fff;
                    border-radius: 100%;
                  }
                }
                .tips2 {
                  border: 1px solid #08a579;

                  span {
                    background-color: #08a579;
                  }
                }
                p {
                  margin: 0;
                }
              }
            }
          }
        }
        .zhiwu {
          display: flex;
          flex-direction: column;
          margin-left: 70px;
          width: 400px;
          span {
            line-height: 40px;
            p {
              // margin-left: 30px;
            }
          }
        }
        .liucheng {
          margin-top: 30px;
          p {
            margin-bottom: 15px;
            font-size: 14px;
            color: #646566;
            a {
              font-size: 12px;
              color: #969799;
            }
          }
          .liuchengList {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            margin-bottom: 10px;
            width: 440px;
            height: 48px;
            line-height: 48px;
            background: #f3f3f3;
            border-radius: 5px;
            cursor: pointer;
            p {
              margin: 0;
            }
            img {
              width: 22px;
              height: 22px;
            }
          }
          .choseLiuchengList {
            background-color: #ebfaf5;
          }
        }
        .grzy {
          p {
            text-align: center;
            margin-top: 30px;
            margin-bottom: 10px;
            color: #333;
            a {
              color: #f6444e;
            }
          }
          h5 {
            text-align: center;
            font-weight: normal;
            font-size: 14px;
            color: #333;
          }
          .kfevm {
            margin-top: 15px;
            text-align: center;
            img {
              width: 160px;
            }
          }
        }
        .tijiao {
          margin-left: 400px;
          margin-top: 20px;
          margin-bottom: 20px;
          width: 80px;
          height: 36px;
          line-height: 36px;
          color: #fff;
          text-align: center;
          font-size: 14px;
          background: #08a579;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
  }
  .heduiMsg {
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    .heduiBox {
      width: 400px;
      height: 336px;
      background: #ffffff;
      border-radius: 20px;
      .top {
        margin-bottom: 10px;
        height: 80px;
        background: linear-gradient(359deg, #ffffff, #d2f9ee);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        h2 {
          font-size: 20px;
          line-height: 80px;
          text-align: center;
        }
      }
      p {
        // text-align: center;
        margin-left: 113px;
        font-size: 14px;
        color: #333;
        line-height: 30px;
        a {
          color: #fa3643;
        }
      }
      .anniu {
        display: flex;
        justify-content: center;
        span {
          margin: 30px;
          display: inline-block;
          text-align: center;
          line-height: 36px;
          width: 96px;
          height: 36px;
          border: 1px solid #08a579;
          border-radius: 4px;
          cursor: pointer;
        }
        span:first-child {
          color: #08a579;
        }
        span:last-child {
          color: #fff;
          background: #08a579;
        }
      }
    }
  }
  .jtSuccessBox {
    /deep/.el-dialog__body {
      overflow: hidden;
      padding: 0;
    }
    /deep/.el-dialog {
      margin-top: 32vh !important;
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    .top {
      margin-bottom: 10px;
      height: 60px;
      background: linear-gradient(359deg, #ffffff, #d2f9ee);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      h2 {
        font-size: 20px;
        line-height: 80px;
        text-align: center;
      }
    }
    p {
      margin: 0 auto;
      margin-bottom: 10px;
      width: 300px;
      color: #333;
      font-size: 14px;
      a {
        color: #fa3643;
      }
    }
    .tishi {
      margin-bottom: 40px;
      text-align: center;
      width: 330px;
      font-size: 12px;
      color: #939699;
    }
    img {
      margin-top: 20px;
      margin-left: 120px;
      margin-bottom: 30px;
      width: 160px;
      height: 160px;
    }
    span {
      display: inline-block;
      margin-left: 130px;
      margin-bottom: 30px;
      text-align: center;
      width: 140px;
      height: 36px;
      line-height: 36px;
      background: #08a579;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }
  .grSuccessBox {
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    .top {
      margin-bottom: 10px;
      height: 80px;
      background: linear-gradient(359deg, #ffffff, #d2f9ee);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      h2 {
        font-size: 20px;
        line-height: 80px;
        text-align: center;
      }
    }
    p {
      margin: 0 auto;
      width: 322px;
      color: #333;
      font-size: 14px;
    }
    img {
      margin-top: 20px;
      margin-left: 120px;
      margin-bottom: 30px;
      width: 160px;
      height: 160px;
    }
    span {
      display: inline-block;
      margin-left: 130px;
      margin-bottom: 30px;
      text-align: center;
      width: 140px;
      height: 36px;
      line-height: 36px;
      background: #08a579;
      border-radius: 4px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }
  .bread {
    display: flex;
    margin: 20px auto;
    width: 1200px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    // font-weight: 400;
    color: #626366;
    line-height: 24px;
    .el-breadcrumb {
      font-size: 14px;
      line-height: 24px;
      /deep/.el-breadcrumb__item:last-child {
        .el-breadcrumb__inner {
          color: #08a579;
        }
      }
      /deep/.el-breadcrumb__inner.is-link {
        font-weight: normal;
      }
    }
  }
  .top {
    .box1 {
      margin: 20px auto;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background-color: #fff;
      width: 1200px;
      height: 150px;
      // border-radius: 20px;
      cursor: pointer;
      img {
        margin: 20px;
        max-width: 110px;
        max-height: 110px;
      }
      .msg {
        position: relative;
        flex: 1;
        height: 80px;
        .title {
          display: flex;
          // position: relative;
          // margin: 20px 0;
          // left: -8px;
          // margin-bottom: 10px;
          font-weight: 600;
          h2 {
            font-size: 16px;
            color: #333333;
          }
          span {
            margin-right: 8px;
            text-align: center;
            width: 72px;
            height: 20px;
            background: #f85230;
            border-radius: 4px;
            font-size: 14px;
            color: #fff;
          }
        }
        // h3 {
        //   margin-bottom: 20px;
        //   font-size: 15px;
        //   font-weight: normal;
        //   color: #666;
        // }
        p {
          
          margin-bottom: 14px;
          font-size: 13px;
          color: #666;
        }
        .synopsis {
          position: absolute;
          bottom: 0;
          display: inline-block;
          width: 800px;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .shenling {
        margin-right: 30px;
        width: 120px;
        height: 40px;
        background: #f85230;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
      }
    }
  }
  .content {
    margin: 0 auto;
    width: 1200px;
    background-color: #fff;
    overflow: hidden;
    /deep/.el-tabs__item {
      padding: 0;
      width: 120px;
      height: 38px;
      text-align: center;
    }
    /deep/.el-tabs__item:hover {
      color: #333;
    }
    /deep/.el-tabs__item.is-active {
      background-color: #08a579;
      color: #fff;
    }
    /deep/.el-tabs__active-bar {
      height: 0;
    }
    /deep/.el-tabs__nav-wrap::after {
      height: 1px;
    }
    .navTap {
      display: flex;
      margin-bottom: 20px;
      width: 1200px;
      background: #fff;
      border-bottom: 1px solid #dee0e3;
      .tap {
        display: inline-block;
        width: 120px;
        height: 38px;
        border-radius: 1px;
        text-align: center;
        line-height: 38px;
        color: #646566;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
      }
      .choseTap {
        background: #08a579;
        color: #fff;
      }
    }
    .detail {
      .contents {
        margin: 0 auto;
        width: 1000px;
        text-align: center !important;
        /deep/p {
          margin: 20px 0;
          padding: 0;
          margin: 0;
          font-size: 14px;
          // width: 1000px;
        }
        /deep/img {
          padding: 0;
          margin: 0;
          max-width: 640px !important;
          height: auto !important;
          object-fit: fill;
        }
      }
      .readOnline {
        display: inline-block;
        margin-left: 20px;
        margin-bottom: 20px;
      }
      .home {
        .turnClass {
          margin: 0 auto;
          width: 1140px;
          border: 5px solid #ececec;
          border-top: 0;
          border-bottom: 0;
          border-radius: 5px;
          .bookTitle {
            position: relative;
            height: 42px;
            background-color: #ececec;
            text-align: center;
            line-height: 42px;
            h2 {
              font-size: 14px;
              font-weight: normal;
            }
            .full {
              position: absolute;
              top: 0px;
              right: 30px;
              font-size: 14px;
              cursor: pointer;
              i {
                font-size: 18px;
              }
            }
            .full:hover {
              background: #ccc;
            }
          }
          .bookBox {
            position: relative;
            // background-color: #ececec;
            .yinying {
              position: absolute;
              left: 838px;
              width: 15px;
              height: 570px;
              // background-color: red;
              z-index: 1;
              transition: all 2s;
              img {
                height: 100%;
              }
            }
            .yinying1 {
              left: 773px;
              display: inline-block;
            }
            .yinying2 {
              background-color: #fff;
              display: inline-block;
              left: 990px;
            }
            .yinying3 {
              width: 3px;
              left: 147px;
              display: inline-block;
              background-color: #c3c0c0;
            }
            .yinying4 {
              left: 562px;
              display: inline-block;
            }
          }
          #flipbook {
            // background-color: #e4e4e4;
            // background-image: url("https://static.idianjiao.com/upload/img/20220727/16589151790003887.jpg");
            // background-repeat: no-repeat;
            // background-attachment: fixed;
            // background-size: 420px 570px;
            // border: 1px solid #ccc;
            // margin: 0 auto !important;
            // margin-left: -65px !important;

            div {
              img {
                width: 100%;
                height: 100%;
              }
              .pageIndex {
                position: absolute;
                bottom: 0px;
                left: 50%;
                font-weight: 900;
                z-index: 1000;
              }
            }
          }
          .changePage {
            margin: 0 auto;
            width: 1140px;
            height: 42px;
            line-height: 38px;
            text-align: center;
            background-color: #ececec;
            // border: 1px solid #ccc;
            border-top: 0;
            span {
              display: inline-block;
              width: 86px;
              font-size: 24px;
              color: #666;
              border: 2px solid #ccc;
              cursor: pointer;
            }
            .previous {
              margin-right: 20px;
            }
          }
        }
      }
      .ptzy{
        margin-top: 0px;
        .ptzyTop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          .zyLeft{
            display: flex;
            align-items: center;
            margin-left: 50px;
            img{
              width: 16px;
              height: 16px;
              cursor: pointer;
              user-select: none;
            }
            p{
              margin-left: 8px;
              font-size: 14px;
              color: #333333;
              user-select: none;
            }
          }
          .zyRight{
            display: flex;
            align-items: center;
            margin-right: 30px;
            p{
              margin-right: 8px;
              font-size: 14px;
              color: #999999;
            }
            span{
              display: inline-block;
              text-align: center;
              width: 120px;
              height: 40px;
              background: #08A579;
              border-radius: 4px;
              color: #FFFFFF;
              font-size: 14px;
              line-height: 40px;
              user-select: none;
              cursor: pointer;
            }
            span:active{
              opacity: .8;
            }
          }
        }
        .zyContent{
          margin-left: 30px;
          /deep/.el-collapse{
            border:none;
          }
          /deep/.el-collapse-item__header{
            // margin-left: 30px;
                // margin-bottom: 10px;
            background: #F0F2F5;
            width: 1140px;
          }
          /deep/.el-collapse-item__arrow{
            display: none;
          }
          /deep/.el-collapse-item__wrap{
            border:none;
          }
          /deep/.el-collapse-item__content{
            padding: 0;
          }
          /deep/.el-collapse-item {
            margin-bottom: 20px !important;
          }
          .fenleiTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .fleft{
              margin-left: 20px;
              font-size: 16px;
              color: #333333;
            }
            .fright{
              margin-right: 20px;
              font-size: 14px;
              color: #333333;
              user-select: none;
            }
          }
          .list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 1140px;
            // height: 60px;
            margin: 24px 0;
            .kjLeft{
              display: flex;
              align-items: center;
              img{
                margin:0 20px;
                margin-right: 16px;
                width: 16px;
                height: 16px;
                cursor: pointer;
                user-select: none;
              }
              p{
                width: 600px;
                font-size: 14px;
                color: #646566;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                // user-select: none;
              }
            }
            .kjRight{
              display: flex;
              align-items: center;
              margin-right: 20px;
              font-size: 14px;
              color: #999999;
              p{
                margin-left: 20px;
                user-select: none;
                cursor: pointer;
              }
            }
          }
          .list:last-of-type{
            // margin-top: 10px;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .biaoji {
    width: 1200px;
    height: 3px;
  }
  .seemore {
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    //   top: 0;
    width: 1200px;
    background-color: #fff;
    p {
      margin-left: 20px;
      font-size: 14px;
      color: #646566;
      line-height: 60px;
    }
    .shenling {
      margin-right: 30px;
      width: 120px;
      height: 40px;
      background: #f85230;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      line-height: 40px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>
